<template>
  <div class="common-layout">
    <el-container>
      <!-- 侧边导航 -->
      <el-aside width="200px">
        <div class="top" v-if="isCollapse == false">
          <div>
            <img
              src="http://websong.wang:3002/static/img/logo.1cab576e.png"
              alt=""
            />
            <h3>极倍 CMS</h3>
          </div>
        </div>
        <div class="top-tow" v-else>
          <img
            src="http://websong.wang:3002/static/img/logo.1cab576e.png"
            alt=""
          />
        </div>
        <el-menu
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose"
          active-text-color="#ffd04b"
          background-color="#545c64"
          text-color="#fff"
        >
          <template v-for="(item, index) in data.nav">
            <el-sub-menu
              :index="index"
              :key="index"
              v-if="item.title != '关于我们'"
            >
              <template #title>
                <el-icon :size="20">
                  <component :is="item.icon"></component>
                </el-icon>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item-group v-if="item.children">
                <el-menu-item
                  :index="ele.path"
                  v-for="ele in item.children"
                  :key="ele.path"
                  @click="todo"
                >
                  {{ ele.title }}</el-menu-item
                >
              </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item v-else @click="$router.push(item.path)">
              <el-icon :size="20">
                <Folder />
              </el-icon>
              <span>关于我们</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <!-- 头部 -->
      <el-container>
        <el-header class="header">
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-icon :size="20" v-if="isCollapse == false">
              <Fold @click="isCollapse = !isCollapse" />
            </el-icon>
            <el-icon :size="20" v-else>
              <Expand @click="isCollapse = !isCollapse" />
            </el-icon>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }"
                >仪表盘</el-breadcrumb-item
              >
              <el-breadcrumb-item><a href="/">首页</a></el-breadcrumb-item>
              <el-breadcrumb-item>仪表盘</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="right">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <img width="30" src="../assets/logo.png" alt="" />
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="home">首页</el-dropdown-item>
                    <el-dropdown-item @click="login">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </el-radio-group>
        </el-header>

        <!-- 内容区域 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ArrowDown } from "@element-plus/icons-vue";
import store from "@/store/index";
import { logout } from "@/api/login_api";
const $router = useRouter();
const data: any = reactive({
  nav: [
    {
      title: "首页",
      icon: "Menu",
      children: [
        {
          title: "仪表盘",
          path: "/",
        },
        {
          title: "焦点图管理",
          path: "/centralPoint",
        },
        {
          title: "企业特色管理",
          path: "/feature",
        },
      ],
    },
    {
      title: "关于我们",
      path: "/about",
    },
    {
      title: "产品列表",
      icon: "HelpFilled",
      children: [
        {
          title: "产品管理",
          path: "/management",
        },
        {
          title: "产品添加",
          path: "/addition",
        },
        {
          title: "分类管理",
          path: "/classmanagement",
        },
      ],
    },
    {
      title: "管理员",
      icon: "Avatar",
      children: [
        {
          title: "管理员管理",
          path: "/custodian",
        },
        {
          title: "添加管理员",
          path: "/addcustodian",
        },
      ],
    },
  ],
});
const isCollapse = ref(false);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const todo = ({ index }: any) => {
  $router.push(index);
};
const home = () => {
  $router.push("/home");
};
const login = () => {
  logout().then((res: any) => {
    $router.replace("login");
  });
};
</script>
<style lang='scss' scoped>
.el-menu-vertical-demo {
  height: 100vh;
}

.header {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e5e5e5;
  background-color: #fff;
}

.top {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  background: #2b2f3a;
  text-align: center;
  justify-content: center;

  > div {
    display: flex;
    align-items: center;
    img {
      width: 32px;
      height: 32px;
      margin-right: 12px;
    }
    h3 {
      color: #fff;
      font-size: 14px;
    }
  }
}
.top-tow {
  width: 63px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2b2f3a;
  img {
    width: 32px;
    height: 32px;
  }
}
// 面包屑
.el-breadcrumb__item {
  margin-left: 10px;
}
.right {
  display: flex;
  text-align: right;
}
</style>